<template>
    <addStudentPaymentView ref="addStudentPaymentView" />
    <div class="app-table">
        <div class="app-body">
            <!-- <div class="navBox">
                <el-icon color="#0065FF">
                    <Location />
                </el-icon>
                <p>当前位置：</p>
                <el-breadcrumb separator=">">
                    
                    <el-breadcrumb-item to="/studentPaymentIndexView/studentPaymentView">收费管理</el-breadcrumb-item>
                    <el-breadcrumb-item to="/studentPaymentIndexView/studentPaymentView">收费任务</el-breadcrumb-item>
                </el-breadcrumb>
            </div> -->
            <div id="pay_top">
                <!-- <div class="top_title">财务管理系统</div> -->
                <div class="top_btn_box">
                    <div class="top_btn_li top_btn_li1" @click="addPayment">
                        <img style="width: 20px;" src="../../assets/StudentPaymentTopIcon1.png" alt="">
                        <p>添加收费</p>
                    </div>
                    <div class="top_btn_li top_btn_li2">
                        <img style="width: 20px;" src="../../assets/StudentPaymentTopIcon2.png" alt="">
                        <p>添加{{ campusName1 }}收费</p>
                    </div>
                    <div class="top_btn_li top_btn_li3">
                        <img style="width: 20px;" src="../../assets/StudentPaymentTopIcon3.png" alt="">
                        <p>添加微信收费</p>
                    </div>
                    <div class="top_btn_li top_btn_li2">
                        <img style="width: 20px;" src="../../assets/StudentPaymentTopIcon4.png" alt="">
                        <p>数据对比</p>
                    </div>
                </div>
            </div>
            <el-table :data="payList" header-row-class-name="table_header"
                :header-cell-style="{ background: '#F0F0F0', color: '#999999', height: '50px', borderRadius: '5px 5px 0 0' }">
                <el-table-column type="selection" width="30" />
                <el-table-column prop="id" label="id" width="50" />
                <el-table-column prop="name" label="任务名称" width="300" />
                <el-table-column prop="id" label="减免总数" />
                <el-table-column prop="id" label="已缴纳人数" />
                <el-table-column prop="createName" label="创建人" />
                <el-table-column prop="createTime" label="创建时间" width="120" />
                <el-table-column label="操作" width="460px">
                    <template style="display: block" #default="scope">
                        <el-button class="btn1 btn11" size="small" type="success" @click="goPayList">名单管理</el-button>
                        <el-button class="btn1 btn12" size="small" type="danger">缴费详细</el-button>
                        <el-button class="btn1 btn13" size="small" type="success">核实总额</el-button>
                        <el-button class="btn2" size="small" type="danger">催缴</el-button>
                        <span class="shuxian">|</span>
                        <el-button class="btn2" size="small" type="danger">停用</el-button>
                        <span class="shuxian">|</span>

                        <el-popover placement="bottom-start" width="200px">
                            <div class="moreBtn_box">
                                <el-button size="small" text @click="visible = false">同步缴费状态</el-button>
                                <span class="shuxian">|</span>
                                <el-button size="small" type="primary" @click="visible = false">同步票据</el-button>
                            </div>
                            <template #reference>
                                <el-button class="btn2" size="small" type="danger">更多<el-icon>
                                        <ArrowDown />
                                    </el-icon></el-button>
                            </template>
                        </el-popover>
                        <!-- <el-button class="btn2" size="small" type="danger">更多<el-icon>
                                <ArrowDown />
                            </el-icon></el-button> -->
                    </template>
                </el-table-column>
                <template v-slot:empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>
            <div style="margin-top: 20px;float: right;">
                <el-config-provider :locale="locale">
                    <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                        @current-change="changeCurrentPage">
                    </el-pagination>
                </el-config-provider>
            </div>
        </div>
        <!-- <bottomView></bottomView> -->
    </div>
</template>
<script>

import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload, Location, ArrowDown } from "@element-plus/icons-vue";
import { ArrowRight } from '@element-plus/icons-vue'
import { API_BASE_NAME2, API_BASE_NAME3 } from '../../constants';
import addStudentPaymentView from "@/components/studentPayment/addStudentPaymentView.vue";

export default {
    name: "classTeacherList",
    data() {
        return {
            campusName: API_BASE_NAME2,
            campusName1: API_BASE_NAME3,
            type: 0,
            title: "",
            page: 1,
            pages: 0,
            pageSize: 10,
            total: 0,
            limit: 10,
            list: [],
            payList: [],
            departmentList: [],
            form: {
                teacherName: "",
                className: ""
            },
            navData: [],
            navData1: [],
        };
    },
    components: {
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        // bottomView,
        ElMessage, Upload, Location, ArrowDown, ArrowRight, addStudentPaymentView
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getStudentPayList();
        this.navData = this.$route.matched
        // console.log('route', this.navData);
        this.getTreeData()
    },
    computed: {

    },
    methods: {
        getTreeData() {
            httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "6014" }, "get").then((data) => {
                this.list = data[0].children;
                // console.log(this.list);
                this.navData1 = this.getAllChildren(this.list);
            });
        },
        getAllChildren(items) {
            let children = [];
            items.forEach(item => {
                children.push(item);
                if (item.children) {
                    children = children.concat(this.getAllChildren(item.children));
                }
            });
            return children;
        },
        goPayList() {
            this.$router.push({ name: 'payListManagementView' })
        },
        addPayment(data) {
            this.$refs.addStudentPaymentView.title = '添加收费';
            this.$refs.addStudentPaymentView.dialogFormVisible = true;
            this.$refs.addStudentPaymentView.id = data.id
        },
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.page = 1;
                this.getStudentPayList();
            }
        },

        reloadData() {
            this.page = 1;
            this.getStudentPayList()
        },

        onSubmit() {
            this.page = 1;
            this.getStudentPayList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getStudentPayList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getStudentPayList();
        },

        getStudentPayList() {
            httpService(
                "/javaApi/payment/list/" + this.page + "/" + this.pageSize,
                {},
                "get"
            ).then((data) => {
                if (data.list) {
                    data.list.map(item => item.createTime = item.createTime.slice(0, 10))
                }
                this.payList = data.list
                this.list = data.list
                this.total = data.total;
            });
        },
    },
};
</script>
<style scoped>
.app-table {
    background: #eff3f5;
    padding: 10px;
    /* width: calc(100vw - 220px); */
}

/* .app-search {} */


.app-body {
    background: white;
    padding: 15px 20px 10px 20px;
    padding: 15px;
    margin-bottom: 10px;
    /* min-height: calc(100vh - 204px); */
    min-height: calc(100vh - 166px);
}

#pay_top {
    width: 100%;
    height: 165px;
    /* background-color: chocolate !important; */
    background: url(../../assets/StudentPaymentTop.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    margin-bottom: 15px;
}

.top_title {
    padding: 50px 0 0 30px;
    font-size: 29px;
    color: #0065FF;
}

.top_btn_box {
    display: flex;
    margin: 0 0 0 30px;
    padding-top: 100px;
}

.top_btn_li {
    width: 154px;
    height: 45px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background-color: brown;
    border-radius: 3px;
}

.top_btn_li img {
    margin-right: 10px;
}

.top_btn_li1 {
    background-color: #007EFF;
}

.top_btn_li2 {
    color: #FF7200;
    border: 1px solid #FF7200;
    background-color: #fff;
}

.top_btn_li3 {
    color: #15BA11;
    border: 1px solid #15BA11;
    background-color: #fff;
}


.table_header {
    border-radius: 5px 5px 0 0;
}

.navBox {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    height: 20px;
}

.btn1 {
    width: 75px;
    height: 32px;
    font-size: 14px;
}

.btn11 {
    color: #fff;
    background-color: #007EFF;
    border: none;
}

.btn12 {
    color: #fff;
    background-color: #FF7200;
    border: none;
}

.btn13 {
    color: #0065FF;
    background-color: transparent;
    border: 1px solid #0065FF;
}

.btn2 {
    color: #0065FF;
    font-size: 14px;
    background-color: transparent;
    border: none;
}

.shuxian {
    color: #8E8E8E;
    font-size: 12px;
}

.el-popconfirm__main {
    display: none !important;
}

.el-popconfirm__icon {
    display: none !important;
}

.moreBtn_box {
    width: 300px;
    display: flex;
    /* align-items: center; */
}

.moreBtn_box button {
    background-color: transparent;
    border: none;
    color: #333333;
}
</style>
